<template>
	<view class="page">		
		<view class="weui-page__back">
			<image src="https://img.2024csnl.com/static/2.x/a109.png" mode=""></image>
		</view>
		
		<view class="page-name">
			<view class="ch">
				<text>加入我们</text>
			</view>
			<view class="en">
				<text>JOIN US</text>
			</view>
		</view>
		
		<view class="join-service">
			<view class="msgBox">
				<view class="between btnBox" v-if="false">
					<view
						:class="[
							{
								'activeBtn': selectBtn==i
							},
							'oneBtn',
							'align'
						]"
						v-for="(item,i) in btnList"
						:key="i"
						@click="onChangeBtn(i)">{{item}}</view>
				</view>
				<view>
					<view v-if="selectBtn==0 || selectBtn==1" style="padding: 0 30rpx;">
						<formList v-if="selectBtn==0" pageType="0"></formList>
						<formList v-if="selectBtn==1" pageType="1"></formList>
					</view>
					<recruitmentForm v-if="selectBtn==2"></recruitmentForm>
				</view>
				<view style="height: 20rpx;"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		// getTojoinMsg
	} from "../../api/index.js"
	import formList from "./components/formList.vue"
	import recruitmentForm from "./components/apply-form.vue"
	export default {
		components: {
			formList,
			recruitmentForm
		},
		data() {
			return {
				selectBtn: 0,
				btnList: ['商家入驻'],
				systemBarHeight: getApp().globalData.systemBarHeight,
			}
		},
		onLoad(opt) {
			if (opt.pageType) {
				this.selectBtn = opt.pageType
			}

			// this.onGetTojoinMsg()
		},
		methods: {
			// 获取加盟列表-暂不需要
			async onGetTojoinMsg() {
				const res = await getTojoinMsg('s=/ApiMy/levelup')
				const {
					msg,
					status
				} = res.data
				if (status == 1) {

				} else {
					this.showToast(msg)
				}
				// console.log(msg, res, ")000")
			},
			onChangeBtn(i) {
				this.selectBtn = i
			},

		}
	}
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
		background: #f8f8f8;
	}
	
	.page-name {
		position: relative;
		color: #fff;
		z-index: 1;
		padding: 100rpx 0 40rpx;
		text-align: center;
		.ch {
			line-height: 60rpx;
			font-size: 40rpx;
		}
		.en {
			line-height: 40rpx;
			font-size: 28rpx;
			opacity: 0.5;
		}
	}
	
	.join-service {
		position: relative;
		padding: 80rpx 20rpx 0;
	}
	
	.btnBox {
		padding: 0 30rpx 40rpx 30rpx;
		border-bottom: 1px solid #f7f7f7;
	}

	.oneBtn {
		text-align: center;
		color: #333333;
		background: #F7F7F7;
		border-radius: 30rpx;
		width: 185rpx;
		padding: 11rpx 0;
	}

	.activeBtn {
		color: #fff;
		background: #41644A;
	}

	.msgBox {
		margin-top: -80rpx;
		padding: 0 10rpx;
		position: relative;
		border-radius: 40rpx 40rpx 0 0;
		background-color: #fff;
		z-index: 999;
	}

	.topHeaderBox {
		padding: 30rpx;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 1;
		display: flex;
		background: #0ccee0;
	}

	.navBox {
		font-size: 34rpx;
		font-weight: bold;
		color: #fff;
	}

	.backIcon {
		width: 21rpx;
		height: 37rpx;
	}

	.joinService {
		.bgImg {
			width: 100vw;
			height: 488rpx;
		}

	}
</style>